<template>
  <div :class="[$store.state.appPrefix + '-c-chart-line']">
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    // 数据数组，每项包含 completeness, fillWordsStuttering, fluency, confidence, speedVolume
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    dataList: {
      handler(val) {
        this.updateChart(val || [])
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
    // 窗口大小改变时重新渲染
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    initChart() {
      if (!this.$refs.chartContainer) return
      this.chart = echarts.init(this.$refs.chartContainer)
      // 初始化图表
      this.updateChart(this.dataList || [])
    },
    updateChart(dataList) {
      if (!this.chart) return

      // 处理数据
      const dataLength = dataList.length
      const xAxisData = []
      const completenessData = []
      const fillWordsStutteringData = []
      const fluencyData = []
      const confidenceData = []
      const speedVolumeData = []

      dataList.forEach((item, index) => {
        xAxisData.push('第' + (index + 1) + '次')
        completenessData.push(item.completeness || 0)
        fillWordsStutteringData.push(item.fillWordsStuttering || 0)
        fluencyData.push(item.fluency || 0)
        confidenceData.push(item.confidence || 0)
        speedVolumeData.push(item.speedVolume || 0)
      })

      // 根据数据量决定x轴标签显示策略
      let xAxisLabelInterval = 'auto'
      if (dataLength > 10) {
        xAxisLabelInterval = Math.floor(dataLength / 6) // 大约显示6-7个标签
      } else if (dataLength > 5) {
        xAxisLabelInterval = 1 // 每隔一个显示
      } else {
        xAxisLabelInterval = 0 // 全部显示
      }

      const option = {
        color: ['#155BD4', '#4CC273', '#3AE0D5', '#FFAF40', '#159BD4'],
        title: {
          text: '单位：分',
          left: 16,
          top: 8,
          textStyle: {
            color: '#999999',
            fontSize: 12,
            fontWeight: 400
          }
        },
        grid: {
          top: 50,
          left: 16,
          right: 16,
          bottom: 70,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#E5E7EB',
              width: 1,
              type: 'solid'
            }
          }
        },
        legend: {
          data: ['完整度', '准确度', '流畅度', '自信度', '语速音量'],
          bottom: 16,
          left: 'center',
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            color: '#666666',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#E5E7EB'
            }
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12,
            interval: xAxisLabelInterval,
            rotate: dataLength > 15 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#F5F5F5',
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '完整度',
            type: 'line',
            data: completenessData,
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              width: 2,
              color: '#155BD4'
            },
            itemStyle: {
              color: '#155BD4'
            }
          },
          {
            name: '准确度',
            type: 'line',
            data: fillWordsStutteringData,
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              width: 2,
              color: '#4CC273'
            },
            itemStyle: {
              color: '#4CC273'
            }
          },
          {
            name: '流畅度',
            type: 'line',
            data: fluencyData,
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              width: 2,
              color: '#3AE0D5'
            },
            itemStyle: {
              color: '#3AE0D5'
            }
          },
          {
            name: '自信度',
            type: 'line',
            data: confidenceData,
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              width: 2,
              color: '#FFAF40'
            },
            itemStyle: {
              color: '#FFAF40'
            }
          },
          {
            name: '语速音量',
            type: 'line',
            data: speedVolumeData,
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              width: 2,
              color: '#159BD4'
            },
            itemStyle: {
              color: '#159BD4'
            }
          }
        ]
      }

      this.chart.setOption(option, true)
    }
  }
}
</script>
